@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*
{
    margin: 0;/*外边距*/
    padding: 0;/*内边距*/
    font-family: 'Poppins', sans-serif;/*所用字体*/
}

body
{
    background: #000 url(bg.jpg);/*背景照片*/
    background-attachment: fixed;/*fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格
    ，所以它是不滚动的.
    scroll：(CSS1) 背景图片附着在背景容器上，它是相对于背景容器（元素）固定
    ,它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。
    */
    background-blend-mode: hard-light;/*混合模式，强光*/
}

.container{
    position: absolute;
    top: 80px;/*不属于盒子模型，就是盒子模型外面与盒子模型的距离*/
    left: 100px;
    right: 100px;
    bottom: 80px;
    background: url(bg.jpg);
    background-attachment: fixed;/*fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格
    ，所以它是不滚动的.*/
    display: flex;/*自由布局*/
    justify-content: center;/*设置盒子在横轴上的布局方式，位于中间*/
    align-items: center;/*垂直居中*/
    flex-direction: column;/*主轴方向从上到下*/
    box-shadow: 0 50px 50px rgba(0,0,0,0.5),
                0 0 0 100px rgba(0,0,0,.1);
}

.container h2 {
    text-align: center;/*文字居中*/
    font-size: 10em;
    line-height: 0.7em;
    color: #333;
    margin-top: -80px;
}

.container h2 span{
    display: block;/*元素表现为块级元素*/
    font-weight: 300;/*字体粗细*/
    letter-spacing: 6px;/*字体间距*/
    font-size: 0.2em;
}
.countdown{
    display: flex;/*自由布局*/
    margin-top: 50px;
}
.countdown div{
    position: relative;/*会覆盖其它元素*/
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #333;
    color: #fff;
    margin: 0 15px;
    font-size: 3em;
    font-weight: 500;
}
.countdown div:before{
    content: '';
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 35px;
    background: #ff0;
    color: #333;
    font-size: 0.35em;
    line-height: 35px;
    font-weight: 300;
}
.container #day:before{
    content: 'Days';     
}/*.是class，#是id，before指在元素内容后面修改，content添加内容*/
.container #hour:before{
    content: 'Hours';
}
.container #minute:before{
    content: 'Minutes';
}
.container #second:before{
    content: 'Seconds';
}